<template>
  <div class="container">
    <el-card class="box-card">
      <div class="new-btn">
        <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增题库</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="form.subjectID" style="width:100%" @focus="getSubjectsList" @change="getSubjectsListTo">
                <el-option
                  v-for="item in subjectsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID" style="width:100%">
                <el-option
                  v-for="item in directorysList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags" style="width:100%">
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" style="width:100%">
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" style="width:100%">
                <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" style="width:100%">
                <el-option
                  v-for="item in directionList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" style="width:100%" @focus="getUsersList">
                <el-option
                  v-for="item in usersList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="form.province" style="width:48%; margin-right:2%;">
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select v-model="form.city" style="width:50%" @focus="getCitysBottomList">
                <el-option
                  v-for="item in citysBottomList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right;">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="getQuestionsList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :title="`一共有${total}条数据`"
        type="info"
        :closable="false"
        style="margin-bottom:20px"
        show-icon
      />
      <el-table
        :data="questionsList"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="number"
          align="center"
          label="试题编号"
        />
        <el-table-column
          prop="subject"
          label="学科"
          align="center"
          width="70px"
        />
        <el-table-column
          prop="catalog"
          align="center"
          width="80px"
          label="目录"
        />
        <el-table-column
          prop="questionType"
          align="center"
          label="题型"
          width="80px"
          :formatter="questionType"
        />
        <el-table-column
          align="center"
          label="题干"
        >
          <template v-slot="{row}">
            <div v-html="row.question" />
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          align="center"
          width="170px"
          label="录入时间"
        >
          <template v-slot="{row}">
            {{ row.addDate |time }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          align="center"
          width="80px"
          label="难度"
          :formatter="difficulty"
        />
        <el-table-column
          prop="creator"
          align="center"
          width="100px"
          label="录入人"
        />
        <el-table-column
          prop="address"
          align="center"
          label="操作"
        >
          <template v-slot="{row}">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              plain
              size="small"
              @click="questionsPreview(row)"
            />
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              size="small"
              @click="$router.push(`/questions/new?id=${row.id}`)"
            />
            <el-button type="danger" icon="el-icon-delete" circle plain size="small" @click="del(row.id)" />
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              plain
              size="small"
              @click="joinChoiceness(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          :page-size="form.pagesize"
          :current-page="form.page"
          :page-sizes="[5, 10, 15, 20, 30, 40]"
          @current-change="currentPage"
          @size-change="sizeChange"
        />
      </el-row>
    </el-card>
    <QuestionsPreview
      :show-questions-dialog.sync="showQuestionsDialog"
      :questions="question"
      :question-type-list="questionTypeList"
      :difficulty-list="difficultyList"
    />
  </div>
</template>

<script>
import { simple as subjectsList } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as directorysList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as usersList } from '@/api/base/users'
import { provinces as cityList, citys as citysBottomList } from '@/api/hmmm/citys'
import { list as questionsList, remove as delQuestions, choiceAdd } from '@/api/hmmm/questions'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data() {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null// 目录
      },
      subjectsList: [], // 学科列表
      difficultyList: difficulty, // 难度
      directorysList: [], // 目录列表
      tagsList: [], // 标签列表
      questionTypeList: questionType, // 题型
      directionList: direction, // 方向列表
      usersList: [], // 用户列表
      cityList: cityList(), // 城市列表
      citysBottomList: [], // 城市下列表
      questionsList: [], // 基础题库列表
      total: 0,
      showQuestionsDialog: false, // 试题预览框
      question: {}
    }
  },
  created() {
    this.getQuestionsList()
  },
  methods: {
    // 获取学科列表
    async getSubjectsList() {
      const data = await subjectsList()
      this.subjectsList = data.data
    },
    async  getSubjectsListTo() {
      this.form.catalogID = null
      this.form.tags = null
      if (this.form.subjectID) {
        // 获取目录列表
        const data = await directorysList(this.form)
        this.directorysList = data.data
        // 获取标签列表
        const data1 = await tagsList(this.form)
        this.tagsList = data1.data.items
      }
    },

    // 获取用户列表
    async getUsersList() {
      const data = await usersList(this.form)
      this.usersList = data.data.list
    },
    // 获取省里边的城市列表
    getCitysBottomList() {
      this.citysBottomList = citysBottomList(this.form.province)
    },
    // 获取基础题库列表
    async getQuestionsList() {
      const data = await questionsList(this.form)
      this.total = data.data.counts
      this.questionsList = data.data.items
    },
    // 清空表单
    clear() {
      for (const k in this.form) {
        if (k !== 'page' && k !== 'pagesize') {
          this.form[k] = null
        }
      }
      this.directorysList = []
      this.tagsList = []
    },
    // 试题类型
    questionType(row, column, cellValue, index) {
      return this.questionTypeList.find(item => +item.value === +cellValue).label
    },
    // 难度
    difficulty(row, column, cellValue, index) {
      return this.difficultyList.find(item => +item.value === +cellValue).label
    },
    currentPage(value) {
      this.form.page = value
      this.getQuestionsList()
    },
    // 删除
    async del(id) {
      try {
        await this.$confirm('你确定要删除吗', '温馨提示', { type: 'warning' })
      } catch {
        return
      }
      console.log(id)
      const data = await delQuestions({ id: id })
      console.log(data)
      if (this.questionsList.length === 1) {
        this.form.page--
      }
      this.$message.success('删除成功')
      this.getQuestionsList()
    },
    // 加入精选
    async joinChoiceness(id) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '温馨提示', { type: 'info' })
      } catch {
        return
      }
      await choiceAdd({ id: id, choiceState: 1 })
      this.$message.success('添加精选成功')
      this.getQuestionsList()
    },
    questionsPreview(row) {
      this.showQuestionsDialog = true
      this.question = row
    },
    sizeChange(value) {
      console.log(value)
      this.form.pagesize = value
      this.getQuestionsList()
    }
  }

}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
}
.new-btn {
  text-align: right;
  margin-bottom: 10px;
}
</style>
